<template>
  <div>
    <div class="left">
    <p>品尚后台管理系统</p>
    <ul>
      <router-link :to="'/backstage' + menu.path" 
        v-for="menu in menus" :key="menu.path" active-class="active">
        <li><i :class='"el-icon-" + menu.icon'></i>{{menu.item}}</li>
      </router-link>
    </ul>
    </div>
    
    <div class="header">
      <span style="margin-left:16%;">首页{{showNav}}</span>
      <span style="float:right;margin-right:40px;margin-left:20px;">
        <i class="el-icon-user-solid"></i>
      </span>
      <span style="float:right;">{{datetime}}</span>
    </div>

    <div class="right">
      <div style="padding:10px;">
        <!-- 缓存路由组件 -->
        <keep-alive> 
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
    name:'backstage',
    data() {
      return {
        timer:'',//更新动态时间的定时器
        datetime:'',//存储时间，用于展示
        menus:[ //左侧导航菜单
          {path:'/home',icon:'s-home',item:'首页'},
          {path:'/goods',icon:'video-play',item:'商品管理'},
          {path:'/order',icon:'goods',item:'订单中心'},
          {path:'/user',icon:'user',item:'用户信息'},
          {path:'/more',icon:'more',item:'更多内容'},
        ]
      }
    },
    computed:{
      showNav(){ 
        switch (this.$route.path) {
          case '/backstage/more': return '->更多内容'
          case '/backstage/goods': return  '->商品管理'
          case '/backstage/order': return  '->订单管理'
          case '/backstage/user': return  '->用户管理'
          default: return 
        }
      }
    },
    mounted() {
      /* 每秒定时刷新 */
      this.timer = setInterval(() => {
        this.datetime = dayjs().format("YYYY[年]MM[月]DD[日] HH:mm:ss")+" 星期"+"天一二三四五六".charAt(new Date().getDay());
      }, 1000)
    },
    beforeDestroy() {
      /* 离开页面前销毁定时器 */
      if(this.timer){
        clearInterval(this.timer);
      }
    }
}
</script>

<style scoped>
    .active{
      color: #C69C6C;
    }
    .left{
        background: #21242E;
        width: 16%;
        overflow:auto;
        min-height: 100vh;
        float:left;
        position:fixed;
        z-index: 20;
    }
    .left p{
      color:#C69C6C;
      text-align:center;
      font-size:20px;
      line-height: 60px;
    }
    ul a{
      font-weight: 100;
      font-size: 15px;
    }
    ul li{
      transition: all 0.5s;
      line-height: 56px;
    }
    ul li:hover{
      background: #393D45;
      color: #C69C6C;
      transition: all 0.5s;
    }
    li i{
      margin-left: 20px;
      margin-right: 10px;
    }
    .header{
      padding: 18px;
      color: white;
      background: #393D45;
      position: fixed;
      width: 100%;
      z-index: 10;
      box-shadow: 0 5px 5px #888888;
    }
    .header span{
      color:#c69c6c;
    }
    .right{
      width: 84%;
      float: right;
      margin-top: 60px;
      /* text-overflow: ellipsis; 
      overflow: auto;
      white-space: nowrap; */
    }
</style>